<template>
	<uni-popup ref="popup" type="bottom" style="z-index: 999;">
		<view class="om-multiselect-bar">
			<view class="om-multiselect-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap.stop="cancel">取消</view>
			<view class="om-multiselect-bar-title" :style="{ color: titleColor }">{{ title }}</view>
			<view class="om-multiselect-bar-confirm" :style="{ color: confirmColor }" hover-class="hover-c" @tap.stop="confirm">确定</view>
		</view>
		<scroll-view scroll-y :scroll-into-view="activeIndex" class=" om-multiselect-scroll-view tui-left">
			<radio-group :value="selectValue" @change="onRadioChange" v-if="!multiple" class="tui-flex">
				<om-wing-blank style="width: 100%;padding-right: 18px;">
					<uni-list>
						<label v-for="(item, index) in items" :key="index">
							<uni-list-item :showArrow="false">
								<view style="display: flex; ">
									<radio
										:id="'select-' + index"
										:color="item.color"
										:disabled="item.disabled"
										:value="item.value"
										:class="item.checked ? 'checked' : ''"
										:checked="item.checked ? true : false"
									/>
									<text class="padding-left-sm">{{ item.label }}</text>
								</view>
							</uni-list-item>
						</label>
					</uni-list>
				</om-wing-blank>
			</radio-group>
			<checkbox-group :value="selectValue" @change="onCheckboxChange" class="tui-flex" v-else>
				<om-wing-blank style="width: 100%;padding-right: 18px;">
					<uni-list>
						<label v-for="(item, index) in items" :key="index">
							<uni-list-item :showArrow="false">
								<view style="display: flex; ">
									<checkbox
										:id="'select-' + index"
										:color="item.color"
										:disabled="item.disabled"
										:value="item.value"
										:class="item.checked ? 'checked' : ''"
										:checked="item.checked ? true : false"
									/>
									<text class="padding-left-sm">{{ item.label }}</text>
								</view>
							</uni-list-item>
						</label>
					</uni-list>
				</om-wing-blank>
			</checkbox-group>
		</scroll-view>
	</uni-popup>
</template>
<script>
export default {
	props: {
		range: {
			type: Array,
			default: function() {
				return [];
			}
		},
		rangeKey: {
			type: String,
			default: 'label'
		},
		idField: {
			type: String,
			default: 'id'
		},
		title: {
			type: String,
			default: ''
		},
		multiple: {
			// 是否可以多选
			type: Boolean,
			default: false
			// default: true
		},
		confirmColor: {
			// 确定按钮颜色
			type: String,
			default: '' // #07bb07
		},
		cancelColor: {
			// 取消按钮颜色
			type: String,
			default: '' // #757575
		},
		titleColor: {
			// 标题颜色
			type: String,
			default: '' // #757575
		},
		value: {
			type: [String,Number,Array],
			default: ''
		},
		gap:{//多选有效，间隔符
			type: String,
			default: ',' 
		},
		valueField:{
			type: String,
			default: '' 
		},
		nameField:{
			type: String,
			default: '' 
		},
	},
	data() {
		return {
			show: false,//显示面板标识
			activeIndex: 'select-10',
			defaultItems: [],//默认项
			items: [],
			returnValue:[],//按确认时返回给用户的值
			defaultValue:[],//默认值
			selectValue:[]//新选择的值
		};
	},
	watch:{
		range:function(newValue,oldValue){
			this.init(newValue)
		}
	},
	created() {
		this.init(this.range)
	},
	methods: {
		init(range){
			let _that = this;
			this.items = range.map(function(n,i) {
				var o = {}
				if (typeof n === 'string') {
					o.value = n
					o.label = n
					o.index = i
					o.defaultValue = n
				}
				else if (typeof n === 'number') {
					o.value = n + ''
					o.label = n
					o.index = i
					o.defaultValue = n
				}else{
					o.value = n[_that.idField] + ''
					o.label = n[_that.rangeKey]
					o.index = i
					o.defaultValue = n[_that.idField]
				}
				if(_that.value){
					//if(_that.value instanceof Array){
					if(Object.prototype.toString.call(_that.value)==='[object Array]'){
						if(_that.value.includes(o.defaultValue)){
							o.checked = true
						}
					}else{
						if(_that.value === o.defaultValue){
							o.checked = true
						}
					}
				}
				return o;
			});
			this.defaultItems = JSON.parse(JSON.stringify(this.items))
			this.initValue(this.value)
		},
		initValue(newValue){
			let _that = this;
			//if(newValue instanceof Array){
			if(Object.prototype.toString.call(newValue)==='[object Array]'){
				this.selectValue = newValue.map(function(n) {
					if (typeof n === 'string') {
						return n;
					}
					return n + '';
				});
			}else{
				this.selectValue = newValue
			}
			this.defaultValue = this.selectValue
		},
		change() {
			this.show = !this.show;
			if (this.show) {
				this.$refs.popup.open();
				
			} else {
				this.close();
			}
		},
		close() {
			this.show = false;
			this.$refs.popup.close();
		},
		confirm(e) {
			this.defaultValue = this.selectValue
			this.defaultItems = JSON.parse(JSON.stringify(this.items))
			this.close();
			let _that = this
			//let v = (_that.selectValue instanceof Array)?[]:'',
			let v = (Object.prototype.toString.call(_that.selectValue)==='[object Array]')?[]:'',
			name = []
			for(var i=0;i<_that.items.length;i++){
				let e = _that.items[i]
				//if(_that.selectValue instanceof Array){
				if(Object.prototype.toString.call(_that.selectValue)==='[object Array]'){
					if(_that.selectValue.includes(e.value)){
						name.push(e.label)
						v.push(e.defaultValue)
						continue
					}
				}else{
					if(_that.selectValue === e.value){
						name.push(e.label)
						v = e.defaultValue
						break
					}
				}
			}
			_that.$emit('confirm',{
				valueField:_that.valueField,
				nameField:_that.nameField,
				value: v,
				name: name,
				title:name.join(_that.gap),
				selectList:_that.range.filter(n=>{
					return _that.selectValue.includes(n[_that.idField].toString())
				})
			})
			
		},
		cancel(){
			this.selectValue = this.defaultValue
			this.returnValue = ""
			this.items = JSON.parse(JSON.stringify(this.defaultItems))
			this.close();
			this.$emit('cancel')
		},
		onCheckboxChange(e) {
			var items = this.items,
				values = e.detail.value;
			this.selectValue = []
			this.returnValue = []
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				if (values.includes(item.value)) {
					this.$set(item, 'checked', true);
					this.selectValue.push(item.value)
					this.returnValue.push(item.defaultValue)
				} else {
					this.$set(item, 'checked', false);
				}
			}
		},
		onRadioChange(evt) {
			var items = this.items;
			this.selectValue = ''
			this.returnValue = ''
			for (let i = 0; i < items.length; i++) {
				let item = items[i];
				if ((item.value + '') === (evt.target.value + '')) {
					this.$set(item, 'checked', true);
					this.selectValue = item.value
					this.returnValue = item.defaultValue
				} else {
					this.$set(item, 'checked', false);
				}
			}
		}
	}
};
</script>

<style>
.om-multiselect-scroll-view {
	max-height: 270px;
	background-color: #fff;
	width: 100%;
}
.om-multiselect-bar {
	background-color: #fff;
	height: 36px;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	border-bottom-width: 1px !important;
	border-bottom-style: solid;
	border-bottom-color: #f5f5f5;
	font-size: 16px;
	color: #757575;
	line-height: 1;
	border-bottom: solid 1px rgb(210,210,210);
}
.om-multiselect-bar-confirm {
	color: #07bb07;
}
.hover-c {
	opacity: 0.6;
}
</style>
